<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>延时提示框</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		div{
			float: left;
			margin-left: 10px;
		}
		#div1{
			width: 50px;
			height: 50px;
			background-color: red;
		}
		#div2{
			width: 200px;
			height: 200px;
			background-color: green;
			display: none;
		}#div3{
			width: 200px;
			height: 200px;
			background: orange;
		}
	</style>

</head>
<body>

	<div id="div1">服装</div>
	<div id="div2">服装简介</div>
	<div id="div3">其他</div>
</body>
<script type="text/javascript">
	window.onload = function() {
		var div1 = document.getElementById("div1");
		var div2 = document.getElementById("div2");
		var timer = null;
		div1.onmouseover = div2.onmouseover = function() {
			clearTimeout(timer);
			div2.style.display = "block";
		}
		div1.onmouseout = div2.onmouseout = function() {
			timer = setTimeout(function(){
				div2.style.display = "none";
			}, 500);
			
		}
	}
</script>
</html>